{extend name="base" /}
{block name="content"}
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-tab layui-tab-brief">
      <ul class="layui-tab-title">
        <li><a href="{:url('admin/dp/courseTemplate')}">课程模板</a></li>
        <li class="layui-this">添加模板</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <form class="layui-form" action="{:url('admin/dp/save_course_template')}" method="post">
            <div class="layui-form-item">
              <label class="layui-form-label">模板名称</label>
              <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入模板名称" class="layui-input">
              </div>
            </div>

           <div class="layui-form-item">
  <label class="layui-form-label">专家</label>
  <div class="layui-input-block">
    {foreach name="expert_list" item="expert"}
      <input type="checkbox" name="expert_ids[]" title="{$expert.name}" value="{$expert.id}" lay-skin="primary">
    {/foreach}
  </div>
</div>

                <div class="layui-form-item">
                            <label class="layui-form-label">课程分类</label>
                            <div class="layui-input-block">
                                <select name="category_id" lay-verify="required">
                                    <option value="">请选择分类</option>
                                    {foreach name="category_list" item="cat"}
                                        <optgroup label="{$cat.name}">
                                            {foreach name="cat.children" item="sub"}
                                            <option value="{$sub.id}">{$sub.name}</option>
                                            {/foreach}
                                        </optgroup>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                <div class="layui-form-item">
              <label class="layui-form-label">上课地点</label>
              <div class="layui-input-block">
                <input type="text" name="location" required lay-verify="required" placeholder="请输入上课地点" class="layui-input">
              </div>
            </div>
    <div class="layui-form-item">
              <label class="layui-form-label">最大人数</label>
              <div class="layui-input-block">
                <input type="text" name="max_number" required lay-verify="required" placeholder="请输入最大人数" class="layui-input">
              </div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label">课程介绍</label>
              <div class="layui-input-block">
                <textarea name="desc" placeholder="请输入介绍内容" class="layui-textarea"></textarea>
              </div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label">标题图</label>
              <div class="layui-input-inline">
                <input type="text" name="title_image" id="title_image" class="layui-input" placeholder="点击上传">
                <img id="preview_title" style="max-height:100px;display:none;margin-top:10px;">
              </div>
              <button type="button" class="layui-btn" id="upload_title">上传</button>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label">海报图</label>
              <div class="layui-input-inline">
                <input type="text" name="poster_image" id="poster_image" class="layui-input" placeholder="点击上传">
                <img id="preview_poster" style="max-height:100px;display:none;margin-top:10px;">
              </div>
              <button type="button" class="layui-btn" id="upload_poster">上传</button>
            </div>

            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submitTpl">提交</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
{/block}

{block name="js"}
<style>
.layui-form select[multiple] {
  height: auto !important;
  min-height: 120px; /* 你可以根据选项多少自己调高度 */
}
</style>
<script>
layui.use(['form', 'upload'], function(){
  var form = layui.form, upload = layui.upload;

  upload.render({
    elem: '#upload_title',
    url: '/index/index/upload',
    field: 'file',
    done(res) {
      if (res.code === 1) {
        const url = '/public/' + res.data.url;
        $('#title_image').val(url);
        $('#preview_title').attr('src', url).show();
        layer.msg('上传成功');
      } else {
        layer.msg('上传失败');
      }
    }
  });

  upload.render({
    elem: '#upload_poster',
    url: '/index/index/upload',
    field: 'file',
    done(res) {
      if (res.code === 1) {
        const url = '/public/' + res.data.url;
        $('#poster_image').val(url);
        $('#preview_poster').attr('src', url).show();
        layer.msg('上传成功');
      } else {
        layer.msg('上传失败');
      }
    }
  });

  form.on('submit(submitTpl)', function(data){
    $.post(data.form.action, $(data.form).serialize(), function(res){
      layer.msg(res.msg);
      if (res.code === 1) {
        setTimeout(() => location.href = "{:url('admin/dp/courseTemplate')}", 1000);
      }
    });
    return false;
  });
});
</script>
{/block}
